<!--
 * @Description: 商品详情
 * @Author: liyujie
 * @Date: 2021/06/05
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/06/05
-->
<template>
    <div
        class="good-edit-wrap"
        ref="wrapper"
    >
        <div
            class="zd-bood-tip"
            v-if="formData.is_disable_edit === 1"
        >
            {{ formData.disable_reason }}
            <i class="iconfont icon-231"/>
        </div>
        <el-alert
            v-if="formData.audit_status == -1"
            :title="'审核不通过: '+formData.audit_reason"
            type="error"
            show-icon
        />
        <div class="tab-wrapper">
            <el-tabs
                v-model="activeName"
                @tab-click="fnChangeTab"
            >
                <el-tab-pane
                    label="基础信息"
                    name="base"
                />
                <el-tab-pane
                    label="销售信息"
                    name="sale"
                />
                <el-tab-pane
                    label="商品规格"
                    name="spec"
                />
                <el-tab-pane
                    label="图文描述"
                    name="desc"
                />
            </el-tabs>
            <el-button
                type="text"
                @click="$router.push({name: 'GoodsList'})"
            >
                返回
            </el-button>
        </div>
        <div
            class="content-wrap"
            ref="scrollWrapper"
        >
            <el-form
                ref="mainform"
                :model="formData"
                label-position="right"
                status-icon
                :rules="formRule"
                label-width="130px"
                :disabled="false"
                style="pointer-events: none"
            >
                <div
                    class="good-pannel"
                    ref="base"
                >
                    <div class="title">
                        基础信息
                    </div>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="商品类型:"
                    >
                        <el-radio
                            v-model="formData.goods_type"
                            :label="1"
                            :disabled="goods_no !== ''"
                        >
                            普通商品
                        </el-radio>
                        <el-radio
                            v-model="formData.goods_type"
                            :label="8"
                            :disabled="goods_no !== ''"
                            v-if="!goods_no || (goods_no && (formData.goods_type == 1 || formData.goods_type == 8))"
                        >
                            虚拟商品
                        </el-radio>
                        <el-radio
                            v-model="formData.goods_type"
                            :label="9"
                            :disabled="goods_no !== ''"
                            v-if="formData.goods_type === 9"
                        >
                            付费优惠券
                        </el-radio>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="跨境商品:"
                        v-if="formData.goods_type == 1"
                    >
                        <el-radio
                            v-model="formData.is_cross_border"
                            :label="0"
                        >
                            否
                        </el-radio>
                        <el-radio
                            v-model="formData.is_cross_border"
                            :label="1"
                        >
                            是
                        </el-radio>
                        <el-popover
                            placement="top-start"
                            width="400"
                            trigger="hover"
                            content="* 跨境商品是指经由海外正规渠道采购，并进行预申报备案，全程在海关、检验检疫部门的监管下，提前存储在海关特殊监管区域的商品。"
                            class="zd-cate-provide"
                        >
                            <i
                                class="iconfont"
                                slot="reference"
                                style="position: relative; top: 0.5px;left:-37px;z-index:999;font-size:16px"
                            >&#xe704;</i>
                        </el-popover>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_title"
                        label="商品名称:"
                    >
                        <el-input
                            placeholder="请输入商品名称，不超过40个字"
                            v-model="formData.goods_title"
                            size="small"
                            class="good-title with-length"
                            maxlength="40"
                        />
                        <span class="input-length">{{ formData.goods_title.length }}/40</span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goodType"
                        label="商品分类:"
                    >
                        <!-- <el-select
                            v-model="formData.cate_no"
                            placeholder="请选择"
                            class="good-input"
                        >
                            <el-option
                                v-for="item in types"
                                :key="item.cate_no"
                                :label="item.title"
                                :value="item.cate_no"
                            />
                        </el-select> -->
                        <el-cascader
                            v-model="formData.goodType"
                            :options="types"
                            :props="typeProps"
                            expand-trigger="click"
                            clearable
                            :filterable="true"
                            class="good-input"
                            placeholder="请填写商品分类"
                            separator="-"
                        />
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_number"
                        label="商品货号:"
                    >
                        <el-input
                            placeholder="选填"
                            v-model="formData.goods_number"
                            size="small"
                            class="good-input"
                        />
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_sort"
                        label="商品排序:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.goods_sort"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span
                            style="display:inline-block;color:#999;margin-left:12px">*店铺首页的商品按此处的数字大小排序，数字越小，排列就越靠前！</span>
                    </el-form-item>
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="sale_virtual"
                        label="商品销量:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.sale_virtual"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*默认起始销量</span>
                    </el-form-item> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="shelf_time"
                        label="上架时间:"
                    >
                        <el-date-picker
                            v-model="formData.shelf_time"
                            value-format="timestamp"
                            type="datetime"
                            size="small"
                            class="good-input"
                        />
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="expire_time"
                        label="失效时间:"
                    >
                        <el-date-picker
                            v-model="formData.expire_time"
                            type="datetime"
                            size="small"
                            value-format="timestamp"
                            class="good-input"
                            @focus="fnSetExpireTime()"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*空意味着永不过期</span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="agent_cate_no"
                        label="所属类目:"
                    >
                        <el-input
                            v-model="formData.agent_cate_info.cate_name"
                            size="small"
                            class="good-input"
                            v-if="formData.agent_cate_info"
                        />
                        <!--<el-select
                            v-model="formData.agent_cate_no"
                            placeholder="选填"
                            class="good-input"
                        >
                            <el-option
                                v-for="item in cateList"
                                :key="item.cate_no"
                                :label="item.cate_name"
                                :value="item.cate_no"
                            />
                        </el-select>-->
                        <el-popover
                            placement="top-start"
                            width="400"
                            trigger="hover"
                            content="* 这里选择的类目，就是校园代理根据自己的兴趣和专业选择来代理的商品类目，比如：A选择代理了化妆品类，那么A将会推销所有属于化妆品类的商品，因为他会得到该类目下商品销售的佣金提成"
                            class="zd-cate-provide"
                        >
                            <i
                                class="iconfont"
                                slot="reference"
                                style="position: relative; top: 1.5px;z-index:999;font-size:16px"
                            >&#xe704;</i>
                        </el-popover>
                    </el-form-item>
                    <!-- 虚拟商品展示 -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="其他收货信息:"
                        v-if="formData.goods_type !== 1"
                    >
                        <div class="_virtual">
                            <div class="_v_info">
                                <el-checkbox-group v-model="formData.virtual_buy_info_type">
                                    <el-checkbox
                                        :label="8"
                                        :disabled="true"
                                    >
                                        收件人手机号
                                    </el-checkbox>
                                    <el-checkbox
                                        :label="2"
                                    >
                                        收件人QQ号
                                    </el-checkbox>
                                    <el-checkbox
                                        :label="4"
                                    >
                                        收件人邮箱
                                    </el-checkbox>
                                </el-checkbox-group>
                                <p class="_v_text">
                                    虚拟商品属特殊商品，收货信息无收货地址和收件人姓名，收件人手机号为购买用户必填信息，如果还需要用户提供其他信息，请自主选择；
                                </p>
                            </div>
                            <div class="_v_random">
                                <template>
                                    <el-checkbox
                                        v-model="checkVirtualType"
                                        @change="handleChangePushType()"
                                    >
                                        自定义收货信息
                                    </el-checkbox>
                                    <el-button
                                        v-if="!formData.virtual_buy_info_list.length"
                                        size="medium"
                                        :style="{marginLeft: '14px'}"
                                        type="primary"
                                        :disabled="!checkVirtualType ? true : false"
                                        @click="handleAddVirtualInfo()"
                                    >
                                        添加自定义信息
                                    </el-button>
                                </template>
                                <template v-if="formData.virtual_buy_info_list.length">
                                    <div class="_v_list">
                                        <div
                                            v-for="(row,index) in formData.virtual_buy_info_list"
                                            :key="index"
                                            class="_v_items"
                                        >
                                            <el-checkbox
                                                v-model="row.value"
                                                @change="handleChangeCancelData(row)"
                                                class="_v_checkbox"
                                            />
                                            <div class="_v_list_wrap">
                                                <el-input
                                                    type="text"
                                                    v-model="row.label"
                                                    maxlength="10"
                                                    show-word-limit
                                                    size="medium"
                                                    :style="{width: '188px'}"
                                                />
                                                <p class="_v_list_tips">
                                                    如：游戏账号
                                                </p>
                                            </div>
                                        </div>
                                        <el-button
                                            size="medium"
                                            :style="{height: '36px'}"
                                            type="primary"
                                            @click="handleAddVirtualInfo()"
                                        >
                                            继续添加
                                        </el-button>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <!-- <el-radio-group v-model="formData.virtual_buy_info_type">
                            <el-radio :label="0">
                                无
                            </el-radio>
                            <el-radio :label="2">
                                收件人QQ号
                            </el-radio>
                            <el-radio :label="4">
                                收件人邮箱
                            </el-radio>
                            <el-radio :label="1">
                                自定义
                                <el-input
                                    v-model="formData.virtual_buy_info_other"
                                    placeholder="请输入自定义收货信息，如游戏账号"
                                    size="small"
                                    maxlength="10"
                                    show-word-limit
                                    :style="{width: '308px', marginLeft: '15px'}"
                                />
                            </el-radio>
                        </el-radio-group>
                        <p :style="{color: 'rgba(153, 153, 153, 1)', fontSize: '12px'}">
                            *购买虚拟商品时让买家填写其他收货信息（其他收货信息是指除收件人手机号以外的信息）
                        </p> -->
                    </el-form-item>
                </div>
                <div
                    class="good-pannel"
                    ref="sale"
                >
                    <div class="title">
                        销售信息
                    </div>
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="tuan_num"
                        label="成团人数:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.tuan_num"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*指拼团成功所需的人数，该人数不建议过大</span>
                    </el-form-item> -->
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="tuan_auto_success"
                        label="自动拼团:"
                    >
                        <el-switch
                            v-model="formData.tuan_auto_success"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="开启"
                            inactive-text="关闭"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*产品初期，为了促进交易，系统会随机给发起拼单的人增加拼单，直至成功</span>
                    </el-form-item> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="成本价:"
                    >
                        <el-input
                            placeholder="选填"
                            v-model="formData.goods_cost_price"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                    </el-form-item>
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="tuan_price"
                        label="拼团价:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.tuan_price"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*指拼团成员的成交价</span>
                    </el-form-item> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_price"
                        label="学生价:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.goods_price"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_price"
                        label="限购数量:"
                    >
                        <el-input
                            placeholder="请填写限购数量"
                            v-model="formData.buy_limit_count"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*-1意味着不限制限购数量</span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_price_origin"
                        label="商品原价:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.goods_price_origin"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">*指该商品的原价，最好与淘宝上的价位保持一致</span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="佣金比例:"
                        prop="goods_commission_rate"
                    >
                        <el-input
                            placeholder="请填写佣金比例"
                            v-model="formData.goods_commission_rate"
                            size="small"
                            type="number"
                            class="good-input"
                            maxlength="10"
                            @blur="handleComputeSpec()"
                        />
                        <!-- @blur="computeSpec()" -->
                        <span style="color:#999;padding-left:10px;position:relative;left:-36px">
                            %
                        </span>
                        <span
                            style="color:#999;padding-left:10px;margin-left:-28px">
                            *加上佣金的6%的发票税，真实佣金比例为：{{ (formData.goods_commission_rate * 1.06).toFixed(2) }}%
                        </span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="优惠选择:"
                    >
                        <div class="tuan_head">
                            <el-radio
                                v-model="formData.discount_type"
                                :label="3"
                            >
                                团购优惠
                            </el-radio>
                            <el-radio
                                v-model="formData.discount_type"
                                :label="2"
                            >
                                满减优惠
                            </el-radio>
                            <span :style="{fontSize: '12px', color: '#999', whiteSpace: 'nowrap'}">
                                （说明：满减优惠和团购价设置只能选择其中一种优惠设置，不能叠加使用，是否确认切换新的优惠设置选择）
                            </span>
                        </div>
                        <div class="_discount">
                            <div
                                class="_container"
                                v-if="formData.discount_type == 3"
                            >
                                <p class="_container_title">
                                    团购数量阶梯价格设置
                                </p>
                                <div
                                    v-for="(row,index) in formData.discountList"
                                    :key="index"
                                    class="_container_list"
                                >
                                    <p class="_container_test">
                                        数量阶梯优惠{{ index | filterDuction }}: &nbsp;&nbsp;数量满&nbsp;
                                    </p>
                                    <el-input
                                        v-model="row.sale_num"
                                        :min="2"
                                        size="small"
                                        :style="{width: '60px', marginRight: '10px'}"
                                        @input="watchDiscount($event, index, '1')"
                                        @blur="blurDiscount(row.sale_num, index)"
                                    />
                                    <p class="_container_test">
                                        件&nbsp;&nbsp;优惠内容: 打&nbsp;
                                    </p>
                                    <el-input
                                        v-model="row.sale_discount"
                                        :min="1"
                                        :max="9"
                                        size="small"
                                        :style="{width: '60px', marginRight: '10px'}"
                                        @input="watchDiscount($event, index, '2')"
                                        @blur="blurNumDiscount(row.sale_discount, index)"
                                    />
                                    <p class="_container_test">
                                        折
                                    </p>
                                    <p
                                        class="_container_del"
                                        @click="deleteDiscount(index)"
                                    >
                                        删除
                                    </p>
                                </div>
                                <div
                                    class="_container_button"
                                    @click="fnAddDiscount()"
                                >
                                    <i class="iconfont icon-count"/>
                                    添加团购阶梯优惠
                                </div>
                                <discount-active-list
                                    :list="discountDataList"
                                    v-if="discountDataList.length"
                                />
                                <div class="_container_foot">
                                    <p class="_container_foot_title">
                                        说明
                                    </p>
                                    <p class="_container_foot_desc">
                                        单个或多个用户购买商品满足团购数量条件即可享受团购单价，是根据购买的商品数量满足设定的团购数量条件，而不是根据商品单个SKU数量满足设定的团购数量条件。
                                        例如用户购买同一个商品3件，包含1件规格A和2件规格B，规格A单件价格89元，满3件，单价为79元，规格B单件价格199元，满3件，单价为189元，因为实际购买商品数量满足3件，享受满3件团购单价，实际购买价格为79*1+189*2=457元。
                                    </p>
                                </div>
                            </div>
                            <el-form-item
                                class="task-form-item"
                                size="small"
                                label="满减类型:"
                                label-width="100"
                                :style="{marginLeft: '30px'}"
                                v-if="formData.discount_type == 2"
                            >
                                <div class="tuan_head">
                                    <el-radio
                                        v-model="formData.reduction_type"
                                        label="1"
                                    >
                                        数量满减
                                    </el-radio>
                                    <el-radio
                                        v-model="formData.reduction_type"
                                        label="2"
                                    >
                                        金额满减
                                    </el-radio>
                                </div>
                                <div class="tuan_wrap">
                                    <div
                                        v-for="(el,index) in formData.fullreList"
                                        :key="index"
                                        class="tuan_list"
                                    >
                                        <div class="tuan_content">
                                            <p class="tuan_title">
                                                {{
                                                    formData.reduction_type == '2' ? '金额' : '数量'
                                                }}满减梯度{{ index | filterDuction }}
                                            </p>
                                            <p
                                                class="tuan_delete"
                                                @click="fnDeleteFuller(index)"
                                            >
                                                删除
                                            </p>
                                        </div>
                                        <div class="tuan_side">
                                            <p class="side_start">
                                                {{ formData.reduction_type == '2' ? '购买总额满' : '购买总件满' }}
                                            </p>
                                            <el-input
                                                v-model="el.require_num"
                                                :placeholder="formData.reduction_type == '2' ? '请填写价格' : '请填写件数'"
                                                size="medium"
                                                :style="{width: '152px'}"
                                            />
                                            <p :style="{color: '#999', fontSize: '14px', position: 'relative', left: '-26px', zIndex: '99'}">
                                                {{ formData.reduction_type == '2' ? '元' : '件' }}
                                            </p>
                                            <p class="side_end">
                                                减
                                            </p>
                                            <el-input
                                                v-model="el.reduction_price"
                                                placeholder="请填写价格"
                                                size="medium"
                                                :style="{width: '152px'}"
                                            />
                                            <p :style="{color: '#999', fontSize: '14px', position: 'relative', left: '-26px', zIndex: '99'}">
                                                元
                                            </p>
                                        </div>
                                    </div>
                                    <div
                                        class="tuan_button"
                                        @click="fnAddFullreDuction()"
                                    >
                                        <i class="iconfont icon-jiahao"/>
                                        添加优惠层级
                                    </div>
                                    <p class="tuan_desc">
                                        最多添加六层优惠，以商品的维度去统计（{{
                                            formData.reduction_type == '2' ? '如某商品进行购买满100减10' : '如某商品进行购买满3件减30'
                                        }}）
                                    </p>
                                </div>
                            </el-form-item>
                        </div>
                    </el-form-item>

                    <!-- TODO -->
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="tuan_owner_pay"
                        label="团长支付价:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.tuan_owner_pay"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                        <span style="display:inline-block;color:#999;margin-left:12px">* 0表示团长需要支付0元，即免单</span>
                    </el-form-item> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="运费设置:"
                    >
                        <el-radio-group
                            v-model="hasFreight"
                            @change="fnChangeFreight"
                        >
                            <el-radio :label="0">
                                包邮
                            </el-radio>
                            <el-radio :label="1">
                                不包邮
                            </el-radio>
                        </el-radio-group>
                        <br>
                        <div
                            class="wrap-hasFreight"
                            v-if="hasFreight"
                        >
                            <el-radio-group
                                v-model="free.free_type"
                            >
                                <div class="wrap-hasFreight-list">
                                    <el-radio :label="0">
                                        运费模版
                                    </el-radio>
                                    <el-input
                                        v-model="formData.freight_template_info.template_name"
                                        placeholder="请输入内容"
                                        size="small"
                                        style="width:300px;margin-right:10px"
                                        v-if="formData.freight_template_info"
                                    />
                                    <el-input
                                        placeholder="请输入内容"
                                        size="small"
                                        style="width:300px;margin-right:10px"
                                        v-else
                                    />
                                    <!--<el-select
                                        v-model="free.free_mod"
                                        clearable
                                        filterable
                                        placeholder="请选择"
                                        size="small"
                                        style="width:300px;margin-right:10px"
                                        @change="fnGetTemp(free.free_mod)"
                                    >
                                        <el-option
                                            v-for="item in freeList"
                                            :key="item.template_no"
                                            :label="item.template_name"
                                            :value="item.template_no"
                                        />
                                    </el-select>-->
                                    <!-- 选择按重量计费展示 -->
                                    <el-input
                                        v-if="free.freight_type == 'weight'"
                                        v-model="free.free_kilog"
                                        placeholder="请输入内容"
                                        size="small"
                                        maxlength="10"
                                        type="number"
                                        style="width:300px;margin-right:10px"
                                    />
                                    <p
                                        v-if="free.freight_type == 'weight'"
                                        class="wrap-hasFreight-list-kg"
                                    >
                                        kg
                                    </p>
                                    <p
                                        v-if="free.freight_type == 'weight'"
                                        class="wrap-hasFreight-list-desc"
                                    >
                                        当前运费模板，按物流重量(含包装)计价
                                    </p>
                                </div>
                                <div class="wrap-hasFreight-list">
                                    <el-radio :label="1">
                                        统一运费
                                    </el-radio>
                                    <el-input
                                        v-model="free.free_money"
                                        placeholder="请输入运费"
                                        size="small"
                                        maxlength="10"
                                        type="number"
                                        style="width:300px;"
                                    />
                                    <p
                                        class="wrap-hasFreight-list-kg"
                                        style="left:-25px"
                                    >
                                        元
                                    </p>
                                </div>
                            </el-radio-group>
                        </div>
                        <!-- <el-input
                            v-if="hasFreight"
                            placeholder="请输入邮费"
                            v-model="formData.goods_freight"
                            size="small"
                            type="number"
                            class="good-input"
                        /> -->
                    </el-form-item>
                    <!-- <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="stock"
                        label="商品库存:"
                    >
                        <el-input
                            placeholder="必填"
                            v-model="formData.stock"
                            size="small"
                            type="number"
                            class="good-input"
                        />
                    </el-form-item> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_service"
                        label="服务内容:"
                    >
                        <!-- <el-input
                            v-for="(sitem, sindex) in serviceList"
                            :key="sindex"
                            :disabled="sindex == 0"
                            placeholder="最多4字"
                            v-model="sitem.value"
                            size="small"
                            maxlength="4"
                            class="good-input service-input"
                        /> -->
                        <el-autocomplete
                            v-for="(sitem, sindex) in serviceList"
                            :key="sindex"
                            :disabled="sindex == 0"
                            v-model="sitem.value"
                            class="good-input service-input"
                            :fetch-suggestions="querySearch"
                            placeholder="最多4字"
                            size="small"
                            :maxlength="4"
                        />
                        <el-tooltip
                            content="Bottom center"
                            placement="top"
                            effect="light"
                            popper-class="service-tip-pop"
                        >
                            <i class="iconfont icon-jieshi icon-commission"/>
                            <img
                                src="http://cdn.wxhand.com/wei/images/hire/manage/market/service-tip.png"
                                alt="提示"
                                slot="content"
                            >
                        </el-tooltip>
                        <span style="display:inline-block;color:#999;margin-left:0">*指商品的服务内容，如：正品保障,支持退货......</span>
                    </el-form-item>
                </div>
                <div
                    class="good-pannel"
                    ref="spec"
                >
                    <div class="title">
                        商品规格
                    </div>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_spec_list"
                        label="规格设置:"
                    >
                        <el-button
                            type="default"
                            size="mini"
                            @click="addSpec(-1)"
                        >
                            +添加主规格
                        </el-button>
                        <span style="display:inline-block;color:#999;margin-left:12px">*主规格不可轻易更改,更改后订单会产生错误</span>
                        <br>
                        <div
                            class="specs"
                            style="padding-bottom: 20px;"
                        >
                            <div
                                class="spec-unit"
                                v-for="(specItem, specIndex) in spec"
                                :key="specIndex"
                            >
                                <div
                                    class="spec-unit-check"
                                    @click="delSpec(specIndex, -1)"
                                >
                                    <i class="iconfont icon-checkbox_checked"/>
                                </div>
                                <div class="spec-unit-name">
                                    <el-input
                                        placeholder="规格名称"
                                        v-model="specItem.spec_name"
                                        size="small"
                                        class="good-spec-input"
                                        maxlength="27"
                                        show-word-limit
                                    />
                                </div>
                                <div class="spec-unit-values">
                                    <div
                                        class="spec-unit-value"
                                        v-for="(specVal, specValIndex) in specItem.values"
                                        :key="specValIndex"
                                    >
                                        <el-input
                                            placeholder="规格名称"
                                            v-model="specVal.spec_value"
                                            size="small"
                                            class="good-spec-input"
                                            maxlength="27"
                                            show-word-limit
                                        />
                                        <el-button
                                            type="text"
                                            size="mini"
                                            @click="delSpec(specIndex, specValIndex)"
                                        >
                                            删除
                                        </el-button>
                                        <el-button
                                            type="text"
                                            size="mini"
                                            v-if="specValIndex==0"
                                            @click="addSpec(specIndex)"
                                        >
                                            +添加
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="computeSpec()"
                        >
                            确认添加新规格
                        </el-button>
                    </el-form-item>
                    <!-- 商品规格设置 -->
                    <!-- <p style="border: 1px red solid;text-align: center">
                        {{ JSON.stringify(specDetail) }}
                    </p> -->
                    <!-- <p style="border: 1px red solid;text-align: center">
                        {{ JSON.stringify(batch) }} {{ batch.is_header_wrap }}
                    </p> -->
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label-width="50px"
                    >
                        <!-- prop="goods_product_list" -->
                        <div class="spec-table-wrapper">
                            <div class="zd-header-button">
                                <span style="display:inline-block;color:#999;line-height:22px">1.为了方便您的操作，以下不同规格的商品价格默认一致，如要修改，建议在创建全部规格之后，一次性修改。 <br>2.下方分佣金额是按当前商品规格的学生价×佣金比例计算得出，分佣金额仅供参考，实际分佣金额以实付金额×佣金比例计算为准，如果商品享受平台活动优惠，实际分佣金额则按（实付金额+平台补贴）×佣金比例计算。</span>
                                <el-button
                                    type="primary"
                                    size="mini"
                                    style="margin-left: 120px"
                                    @click="fnBatchData()"
                                >
                                    批量填充
                                </el-button>
                            </div>
                            <div
                                class="zd-header-wrap"
                            >
                                <el-select
                                    v-model="batch.spec_list_value"
                                    placeholder="请选择"
                                    size="mini"
                                    class="zd-wrap-select"
                                    v-if="!batch.is_header_wrap"
                                    @change="fnSelectSpec()"
                                >
                                    <el-option
                                        v-for="(item,index) in batch.spec_list"
                                        :key="index"
                                        :label="item.spec_value"
                                        :value="index"
                                    />
                                </el-select>
                                <p
                                    class="zd-wrap-select"
                                    v-if="batch.is_header_wrap"
                                >
                                    规格
                                </p>
                                <el-input
                                    v-model="batch.product_price"
                                    placeholder="学生价"
                                    size="mini"
                                    class="zd-wrap-select"
                                />
                                <!-- <el-input
                                    v-model="batch.tuan_price"
                                    placeholder="团购价"
                                    size="mini"
                                    class="zd-wrap-select"
                                /> -->
                                <el-input
                                    v-model="batch.product_commission"
                                    placeholder="分佣金额"
                                    size="mini"
                                    class="zd-wrap-select"
                                    :disabled="true"
                                />
                                <!-- <el-input
                                    v-model="batch.buy_limit_count"
                                    placeholder="限购数量"
                                    size="mini"
                                    class="zd-wrap-select"
                                /> -->
                                <el-input
                                    v-model="batch.product_stock"
                                    placeholder="库存"
                                    size="mini"
                                    class="zd-wrap-select"
                                />
                                <el-input
                                    v-model="batch.cost_price"
                                    placeholder="成本价"
                                    size="mini"
                                    class="zd-wrap-select"
                                />
                                <el-input
                                    v-model="batch.product_sku"
                                    placeholder="商家编码"
                                    size="mini"
                                    class="zd-wrap-select"
                                />
                                <el-input
                                    v-model="batch.product_barcode"
                                    placeholder="条形码"
                                    size="mini"
                                    class="zd-wrap-select"
                                />
                                <el-popover
                                    placement="top-start"
                                    width="400"
                                    trigger="hover"
                                    content="*建议图片大小为:700*700;当规格图片未填充时，默认为商品缩略图"
                                    class="zd-wrap-select"
                                >
                                    <el-button
                                        slot="reference"
                                        class="zd-heade-hover"
                                    >
                                        规格图片
                                        <i
                                            class="iconfont"
                                            style="position: relative; top: 1.5px;z-index:999;"
                                        >&#xe704;</i>
                                    </el-button>
                                </el-popover>
                            </div>
                            <el-table
                                :data="specDetail"
                                class="common-table"
                                style="width: 100%;margin-top:0px"
                            >
                                <el-table-column
                                    header-align="left"
                                    label="规格"
                                >
                                    <template slot-scope="scope">
                                        <p
                                            class="good-table-input"
                                        >
                                            {{ scope.row.spec_list | specFilter }}
                                        </p>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="学生价"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.product_price"
                                            size="small"
                                            type="number"
                                            class="good-table-input"
                                            @blur="changePrice()"
                                            @focus="fnGetIndex(scope.$index)"
                                        />
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column
                                    header-align="left"
                                    label="团购价"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.tuan_price"
                                            size="small"
                                            type="number"
                                            class="good-table-input"
                                            @focus="fnGetIndex(scope.$index)"
                                        />
                                    </template>
                                </el-table-column> -->
                                <el-table-column
                                    header-align="left"
                                    label="分佣金额"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.product_commission"
                                            size="small"
                                            type="number"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                            :disabled="true"
                                        />
                                    </template>
                                </el-table-column>
                                <!-- <el-table-column
                                    header-align="left"
                                    label="限购数量"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.buy_limit_count"
                                            size="small"
                                            type="number"
                                            placeholder="-1:不限制"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                        />
                                    </template>
                                </el-table-column> -->
                                <el-table-column
                                    header-align="left"
                                    :label="'库存(总库存: ' + totalSrock+')'"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.product_stock"
                                            size="small"
                                            type="number"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                        />
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="left"
                                    label="成本价"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.cost_price"
                                            size="small"
                                            type="number"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                        />
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="left"
                                    label="商家编码"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.product_sku"
                                            size="small"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                        />
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="left"
                                    label="条形码"
                                >
                                    <template slot-scope="scope">
                                        <el-input
                                            v-model="scope.row.product_barcode"
                                            size="small"
                                            class="good-table-input"
                                            @focus=" ifChange = false "
                                            @blur=" ifChange = true "
                                        />
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    header-align="left"
                                    label="规格图片"
                                >
                                    <template slot-scope="scope">
                                        <el-upload
                                            class="zd-wrap-price"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="fnUploadThumbBatch"
                                            accept=".jpg,.png,.JPG"
                                            style="width: 110px;height: 32px;border: none"
                                        >
                                            <p
                                                v-if="scope.row.product_image == ''"
                                                class="zd-wrap-image"
                                                @click=" imgIndex = scope.$index "
                                            >
                                                上传图片
                                            </p>
                                            <img
                                                v-if="scope.row.product_image !== ''"
                                                :src="scope.row.product_image"
                                                class="zd-upload-image"
                                                style="pointer-events: auto"
                                                @mouseenter=" moenterImg = scope.row.product_image + scope.$index "
                                                @click.stop="fnPreviewImg(scope.$index)"
                                            >
                                            <!-- v-if="(scope.row.product_image !== '') && moenterImg == scope.row.product_image + scope.$index " -->
                                            <!-- @mouseleave=" moenterImg = '' " -->
                                            <p
                                                class="zd-upload-mc"
                                                v-if="scope.row.product_image !== ''"
                                                @click="fnStop($event)"
                                            >
                                                <i
                                                    class="el-icon-zoom-in"
                                                    @click.stop="fnPreviewImg(scope.$index)"
                                                />
                                                <i
                                                    class="el-icon-delete"
                                                    @click.stop="fnDeleteImg(scope.$index)"
                                                />
                                            </p>
                                        </el-upload>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                    <!-- /商品规格设置 -->
                </div>
                <div
                    class="good-pannel"
                    ref="desc"
                >
                    <div class="title">
                        图文描述
                    </div>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_cover"
                        label="缩略图:"
                    >
                        <el-upload
                            class="avatar-uploader-thumb"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="fnUploadThumb"
                            :on-change="fnChangeUploadThumb"
                            accept="image/*"
                        >
                            <template v-if="thumbTmp">
                                <img
                                    :src="thumbTmp.url"
                                    class="avatar"
                                >
                                <div
                                    class="state-uploading"
                                    v-if="thumbTmp.status !== 'success'"
                                >
                                    <i class="el-icon-loading"/>
                                </div>
                                <label class="el-upload-list__item-status-label">
                                    <i class="el-icon-upload-success el-icon-check"/>
                                </label>
                            </template>
                            <template v-else>
                                <i class="el-icon-upload"/>
                                <span class="el-upload-text">点击上传</span>
                            </template>
                        </el-upload>

                        <span style="display:inline-block;color:#999;margin-left:12px">*建议图片大小:800px*800px</span>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_image_list"
                        label="轮播图:"
                    >
                        <span style="display:inline-block;color:#999;">*建议图片比例为1:1、800px*800px以上图片大小,拖动图片可更换图片位置</span>
                        <br>
                        <ul class="el-upload-list el-upload-list--picture-card">
                            <draggable
                                v-model="uploadPics"
                                a=".dragglable-upload-item"
                                @showImg="fnGeturl"
                            />
                        </ul>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        label="主图视频:"
                        v-if="formData.cover_video && formData.cover_video.verify !== -2"
                    >
                        <div
                            class="video-wrapper"
                            :style="{background: `url(${formData.cover_video.video_cover}) center center no-repeat`, backgroundSize: 'cover'}"
                            @click="previewVideo(formData.cover_video.video_url)"
                        >
                            <img
                                src="@/assets/image/play.png"
                                class="video-action"
                                :style="{top: formData.cover_video.verify !== 1 ? '43%' : '50%'}"
                            >
                            <div
                                class="status-text"
                                :class="formData.cover_video.verify === -1 ? 'reject' : 'verify'"
                                v-if="formData.cover_video.verify === 0 || formData.cover_video.verify === -1"
                            >
                                {{ formData.cover_video.verify === -1 ? '审核不通过' : '审核中...' }}
                            </div>
                        </div>
                        <div
                            class="video-status-tips"
                            v-if="formData.cover_video.verify === -1"
                        >
                            <i class="el-icon-error" />
                            主图视频审核不通过; 驳回原因：{{ formData.cover_video.verify_reason }}
                        </div>
                    </el-form-item>
                    <el-form-item
                        class="task-form-item"
                        size="small"
                        prop="goods_content"
                        label="图文详情:"
                    >
                        <ueditor
                            ref="ueditor"
                            :default-value="formData.goods_content"
                        />
                    </el-form-item>
                </div>
                <div
                    class="good-pannel footer"
                    style="pointer-events: auto"
                >
                    <el-button
                        size="medium"
                        style="width: 120px"
                        @click="$router.push({name: 'GoodsList'})"
                    >
                        返回
                    </el-button>
                </div>
            </el-form>
        </div>
        <!-- 图片预览 -->
        <el-dialog
            :visible.sync="dialogVisible"
            append-to-body
            width="640px"
        >
            <div
                class="preview-img"
                :style="'background-image: url('+dialogImageUrl+');background-position: center;background-size: contain;background-repeat: no-repeat;width: 600px;height: 600px;'"
            />
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview"/>

        <!-- 佣金超额提示 -->
        <div
            v-if="dialogCommision"
            class="dialogCommision"
        >
            <div class="dialogCommision-wrap">
                <i
                    class="el-icon-close"
                    @click="dialogCommision = false"
                />
                <p class="dialogCommision-wrap-title">
                    提示
                </p>
                <p class="dialogCommision-wrap-text">
                    当您在商城财务中开通了支付宝或微信可冻结的账户，则买家的支付金额在结算给您时，会自动扣除此处设置的佣金比例金额。因支付宝/微信官方的限制，此处佣金比例最多只可设置为30%，超出部分则不可扣除。当前您设置的佣金比例大于30%，所以，掌上大学会以超30%的佣金为基数来返还佣金给代理，但掌大真实得到的佣金则因支付官方的限制，只能拿到30%，所以，需要您进入【商城财务-新商城财务-账单详情】中，每月人工支付本月未结算给掌上大学的佣金金额。且此笔金额需要您在每月10号前进行结算，逾期并超出3个工作日，掌上大学有权采取追究措施
                </p>
                <el-button
                    size="small"
                    type="primary"
                    style="width:180px;height:32px;margin:24px 0 32px 0"
                    @click="dialogCommision = false"
                >
                    知道了
                </el-button>
            </div>
        </div>

        <!-- 自定义信息取消勾选弹窗 -->
        <dialog-cancel
            :dialog="cancelDialog"
            :title="''"
            :center="true"
            :width="360"
            class="_cancel"
        >
            <div class="public_dialog">
                <img
                    src="@/assets/image/waring.png"
                    class="public_logo"
                >
                <p class="public_title">
                    温馨提示
                </p>
                <p class="public_text">
                    取消勾选，会删除该自定义信息，是否确认删除该自定义信息?
                </p>
                <div class="public_foot">
                    <el-button
                        size="small"
                        type="default"
                        :style="{marginRight: '32px', width: '80px'}"
                        @click="confirmViruteData()"
                    >
                        取消
                    </el-button>
                    <el-button
                        size="small"
                        type="primary"
                        :style="{width: '80px'}"
                        @click="cancelViruteData()"
                    >
                        确认
                    </el-button>
                </div>
            </div>
        </dialog-cancel>
        <!-- 视频播放组件 -->
        <video-simple
            ref="videoSimple"
            :url="video_cover"
            :top="54"
            :left="left"
        />
    </div>
</template>

<script>
import ueditor from '@/components/common/ueditor.vue';
import draggable from '@/components/goods/draggable';
import imgPreview from '@/components/common/img-preview';
import discountActiveList from '@/components/goods/discount-active-list.vue';
import dialogCancel from '@/components/goods/dialog.vue';
import VueScrollTo from 'vue-scrollto';
import { back } from "@/mixin/back";
import VideoSimple from "@/components/dorm/video-simple";

export default {
    mixins: [back],
    components: {
        VideoSimple,
        // eslint-disable-next-line vue/no-unused-components
        imgPreview,
        ueditor,
        draggable,
        discountActiveList,
        dialogCancel
    },
    data() {
        /** 验证数字, int/number */
        var validateNumber = (rule, value, callback) => {
            let regu = rule.type == 'int' ? /^[0-9]\d*$/ : /^[0-9]+([.]{1}[0-9]+){0,1}$/;

            if (new RegExp(regu).test(value)) {
                if (value < 0) {
                    callback(new Error('不得小于0'));
                } else if (rule.min && value < rule.min) {
                    callback(new Error('不得小于' + rule.min));
                } else {
                    callback();
                }
            } else {
                callback(new Error(rule.type == 'int' ? '请输入正整数' : '请输入正确的数值'));
            }
        };
        var validateShelfTime = (rule, value, callback) => {
            if (value <= 0) {
                callback(new Error('请选择上架时间'));
            } else {
                callback();
            }
        };

        /**验证价格 */
        var validatePrice = (rule, value, callback) => {

            if (value < 0) {
                callback(new Error('请输入正确的价格'));
            } else {
                callback();
            }
        };

        /* 设置佣金比例 */
        var validatePriceSet = (rule, value, callback) => {

            if (value < 0) {
                callback(new Error('请输入正确的价格'));
            } else {
                callback();
            }
        };

        /** 验证轮播图数组 */
        var validateImage = (rule, value, callback) => {
            if (!value || value.length <= 0) {
                callback(new Error('请上传轮播图'));
            } else {
                for (var i in value) {
                    if (!value[i]) {
                        callback(new Error('请等待所有轮播图上传完成'));
                        return;
                    }
                }
                callback();
            }
        };
        /** 验证分类数组 */
        var goodTypeValidator = (rule, value, callback) => {
            if (!value || value.length < 2) {
                callback(new Error('请选择商品类型'));
            } else {
                callback();
            }
        };
        /** 验证规格 */
        var validateSpecs = (rule, value, callback) => {
            // console.log(value, 'value');
            if (!value || value.length <= 0) {
                callback(new Error('请设置商品规格'));
            } else {
                // for (var i in this.spec) {
                //     if (!this.spec[i].spec_name && this.spec[i].spec_name !== 0) {
                //         callback(new Error('请完善规格设置'));
                //         return;
                //     }
                //     for (var j in this.spec[i].values) {
                //         if (!this.spec[i].values[j].spec_value && this.spec[i].values[j].spec_value !== 0) {
                //             callback(new Error('请完善规格设置'));
                //             return;
                //         }
                //     }
                // }
                // //验证规格设置和下端表格是否数量一致
                // if (!this.specDetail.length || this.getSpecNums() !== this.specDetail.length) {
                //     callback(new Error('请点击确认按钮完善规格'));
                //     return;
                // }
                callback();
            }
        };
        /** 验证规格详情 */
        var validateProducts = (rule, value, callback) => {
            if (!value || value.length <= 0) {
                callback(new Error('请点击确定按钮完善规格'));
            } else {

                for (var i in value) {
                    // spec_list: specs[m],
                    // product_price: this.formData.goods_price,
                    // tuan_price: this.formData.tuan_price,
                    // // tuan_owner_pay: this.formData.tuan_owner_pay,
                    // product_stock: 0,
                    // product_commission: 0
                    if (!value[i].product_price || !value[i].tuan_price || (!value[i].product_stock && value[i].product_stock !== 0) || (!value[i].product_stock && value[i].product_stock !== 0) || (!value[i].product_commission && value[i].product_commission !== 0)) {
                        callback(new Error('请完善规格设置'));
                        return;
                    }
                    if (Number(value[i].product_commission) > Number(value[i].tuan_price)) {
                        callback(new Error('分佣金额不得高于团购价'));
                        return;
                    }
                }
                callback();
            }
        };

        // 验证佣金比例
        const validateRate = (rule, value, callback) => {
            if (this.companyInfo.commission_tax_status == 0) {
                if (Number(value) < 0) {
                    callback(new Error('佣金比例不可小于0%'));
                } else if (Number(value) == 0) {
                    callback(new Error('佣金比例不可为0%'));
                } else if (Number(value) > 100) {
                    this.dialogCommision = true;
                    callback(new Error('佣金比例不可超出100%'));
                } else {
                    callback();
                }
            } else if (this.companyInfo.commission_tax_status == 1) {
                if (Number(value) < 0) {
                    callback(new Error('佣金比例不可小于0%'));
                } else if (Number(value) == 0) {
                    callback(new Error('佣金比例不可为0%'));
                } else if (Number(value) > 94) {
                    this.dialogCommision = true;
                    callback(new Error('佣金比例不可超出94%'));
                } else {
                    callback();
                }
            }
        };

        //团购优惠
        const validateFullreList = (rule, value, callback) => {
            let flag = true;

            for (let i = 0; i < value.length; i++) {
                if ((value[i].reduction_price === '' || value[i].require_num === '')) {
                    flag = false;
                }
            }

            if (!flag) {
                callback(new Error('请完善满减优惠'));
            } else {
                callback();
            }
        };

        // 虚拟商品
        // const validateInfo = (rule, value, callback) => {
        //     if(value === 1 && !this.formData.virtual_buy_info_list) {
        //         callback(new Error('请填写自定义收获信息'));
        //     } else {
        //         callback();
        //     }
        // };

        return {
            virtualRow: {},
            cancelDialog: false,
            discountDataList: [],//团购优惠列表数据
            freeList: [],//运费模版
            free: {
                free_old_type: 0,
                free_type: 0,
                free_mod: '',
                free_kilog: '',
                free_money: '',
                template_no: '',
                freight_type: ''
            },//运费
            dialogCommision: false,//佣金提示弹窗
            tuanIndex: -1, //默认批量 -1
            specDetailCopy: [],
            moenterImg: false, //是否展示上传图片蒙层
            imgIndex: '', //记录上传图片索引
            checkVirtualType: false,//是否选择自定义收货信息
            //用于批量设置规格
            batch: {
                spec_list: [], //生成规格数据
                spec_list_value: 0, //选中的规格数据
                product_price: '', //学生价
                tuan_price: '', //团购价
                product_commission: '', //分佣金额
                product_stock: '', //库存
                // buy_limit_count: '',//限购数量
                cost_price: '', //成本价
                product_sku: '', //商家编码
                product_barcode: '', //条形码,
                is_header_wrap: true
            },
            cateList: [],//商品所属类目筛选列表
            ifChange: true,
            goods_no: '',
            init: false,
            activeName: 'base',
            hasFreight: 0,
            typeProps: {
                value: 'no',
                label: 'title',
                children: 'children',
            },
            serviceList: [
                {value: '包邮'},
                {value: ''},
                {value: ''},
                {value: ''},
                {value: ''},
            ],
            formData: {
                "disable_reason": "",
                "is_disable_edit": 0,
                "virtual_buy_info_list": [],
                "virtual_buy_info_type": [8],
                // "virtual_buy_info_other": [],
                "discountList": [],
                "discount_type": 3,
                "goods_type": 1,
                "is_cross_border": 0,
                "goods_price_origin": "",
                "buy_limit_count": -1,
                "fullreList": [{
                    require_num: '',
                    reduction_price: ''
                }],
                "reduction_type": '1',//满减类型
                "goods_number": "",
                "agent_cate_no": "",
                "goods_commission_rate": "",
                "goods_cost_price": '',
                "goodType": [],
                "goods_title": "",
                "goods_sort": 1,
                "shelf_time": new Date().getTime(),
                "expire_time": '',
                "goods_cover": "",
                "goods_image_list": [],
                "tuan_num": 2,
                "tuan_auto_success": 1,
                "tuan_price": 0,
                "goods_price": 0,
                "tuan_owner_pay": 0,
                "goods_freight": 0,
                "goods_service": "service",
                "goods_content": "",
                "goods_spec_list": [
                    {
                        "spec_name": "",
                        "spec_value": ""
                    }
                ],
                "goods_product_list": [
                    {
                        "spec_list": [
                            // {
                            //     "name": "",
                            //     "value": ""
                            // }
                        ],
                        "price": 0,
                        "tuan_price": 0,
                        "tuan_owner_pay": 0,
                        "stock": 0,
                        "product_sku": '',
                        "product_barcode": "",
                        "product_image": ''
                    }
                ]
            },
            formRule: {
                fullreList: [
                    {required: true, message: '请完善满减优惠', trigger: 'blur'},
                    {validator: validateFullreList, message: '请完善满减优惠', trigger: 'blur'}
                ],
                goodType: [
                    {required: true, message: '请选择商品类型', trigger: 'blur'},
                    {validator: goodTypeValidator, trigger: 'blur'}
                ],
                goods_title: [
                    {required: true, message: '请输入标题', trigger: 'blur'},
                    {max: 40, message: '最多40个字', trigger: 'blur'}
                ],
                // cate_no: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
                goods_sort: [
                    {required: true, message: '请输入排序', trigger: 'blur'},
                    {validator: validateNumber, type: 'int', message: '请输入整数', trigger: 'blur'}
                ],
                shelf_time: [
                    {required: true, message: '请选择上架时间', trigger: 'blur'},
                    {validator: validateShelfTime, trigger: 'blur'}
                ],
                expire_time: [
                    {validator: this.validateExpire, trigger: 'blur'}
                ],
                tuan_num: [
                    {required: true, message: '请输入成团人数', trigger: 'blur'},
                    {validator: validateNumber, min: 2, type: 'number', message: '成团人数不得小于2', trigger: 'blur'}
                ],
                tuan_price: [
                    {required: true, message: '请输入拼团价', trigger: 'blur'},
                    {validator: validatePrice, type: 'number', message: '请输入正确的价格', trigger: 'blur'}
                ],
                goods_price: [
                    {required: true, message: '请输入不拼团价', trigger: 'blur'},
                    {validator: validatePrice, type: 'number', message: '请输入正确的价格', trigger: 'blur'}
                ],
                goods_price_origin: [
                    {required: true, message: '请输入商品原价', trigger: 'blur'},
                    {validator: validatePriceSet, type: 'number', message: '请输入正确的价格', trigger: 'change'}
                ],
                goods_commission_rate: [
                    {validator: validateRate, type: 'number', trigger: 'blur'},
                    {required: true, message: '请输入佣金比例', trigger: 'blur'},
                ],
                tuan_owner_pay: [
                    {required: true, message: '请输入团长支付价', trigger: 'blur'},
                    // { validator: validateNumber, type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
                goods_freight: [
                    // { required: true, message: '请输入运费', trigger: 'blur' },
                    {validator: this.validateFreight, type: 'number', message: '请输入邮费', trigger: 'blur'}
                ],
                goods_service: [
                    {required: true, message: '请输入服务', trigger: 'blur'},
                    {validator: this.validateService, type: 'number', trigger: 'blur'}
                ],
                goods_content: [
                    {required: true, message: '请输入图文描述', trigger: 'blur'}
                ],
                goods_spec_list: [
                    {required: true, message: '请设置规格', trigger: 'change'},
                    {validator: validateSpecs, trigger: 'none'}
                ],
                goods_product_list: [
                    {required: true, message: ' ', trigger: 'blur'},
                    {validator: validateProducts, trigger: 'blur'}
                ],
                goods_cover: [
                    {required: true, message: '请上传缩略图', trigger: 'blur'}
                ],
                goods_image_list: [
                    {required: true, message: '请输入图文描述', trigger: 'blur'},
                    {validator: validateImage, trigger: 'blur'}
                ],
                // virtual_buy_info_type: [
                //     { required: true, message: '请填写自定义收获信息', trigger: 'blur' },
                //     { validator: validateInfo, trigger: 'blur' }
                // ]
            },
            types: [],
            cancelScroll: null,
            spec: [],
            specDetail: [],
            uploadPics: [],
            dialogVisible: false,
            dialogImageUrl: '',
            thumbTmp: '',
            thumbUploading: false,
            thumbUploadTime: 0,
            serviceRecomend: [],
            video_cover: '',
            left: 0,
        };
    },
    computed: {
        totalSrock() {
            let total = 0;

            for (var i in this.specDetail) {
                total += +this.specDetail[i].product_stock;
            }
            return total > 0 ? total : 0;
        },
        services() {
            let res = [];

            for (var i in this.serviceList) {
                if (this.serviceList[i].value) {
                    res.push(this.serviceList[i].value);
                }
            }
            return res;
        },
    },
    filters: {
        specFilter(val) {
            let result = '';

            for (let i in val) {
                result += (val[i].spec_name + ':' + val[i].spec_value + '; ');
            }

            return result;
        },
        filterDuction(val) {
            if (val == 0) return '一';
            if (val == 1) return '二';
            if (val == 2) return '三';
            if (val == 3) return '四';
            if (val == 4) return '五';
            if (val == 5) return '六';
        }
    },
    watch: {
        specDetail: {
            handler(newValue, oldValue) {
                if (newValue.length > 0 && oldValue.length > 0 && newValue && oldValue && this.ifChange) {
                    if (this.tuanIndex >= 0) {//单个
                        let price = (newValue[this.tuanIndex].product_price * this.formData.goods_commission_rate / 100).toFixed(2);

                        this.$set(this.specDetail[this.tuanIndex], 'product_commission', price);
                    } else { // 批量
                        // for(let i=0; i< newValue.length; i++) {
                        //     let price = (newValue[i].tuan_price * this.formData.goods_commission_rate / 100).toFixed(2);

                        //     this.$set(this.specDetail[i], 'product_commission', price);
                        // }
                    }
                }
            },
            deep: true
        }
    },
    created() {
        this.goods_no = this.$route.query.no ? this.$route.query.no : '';
        // 获取详情
        this.fnGetData();
        // 获取商品分类
        this.getGoodTypes();
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '商品列表', path: '/student/goods-list'}, {title: '商品详情'}]);
    },
    mounted() {
        this.$refs.scrollWrapper.addEventListener('scroll', this.handleScroll, true);

        // 默认隐藏header,加载自定义header
        this.$nextTick(() => {
            document.querySelector('.el-table__header-wrapper').style.display = 'none';
        });
    },

    methods: {
        /**
         * @description 选择自定义收货信息
         */
        handleChangePushType() {
            if (this.checkVirtualType) {
                this.formData.virtual_buy_info_type.push(1);
            } else {
                this.formData.virtual_buy_info_type.splice(this.formData.virtual_buy_info_type.indexOf(1), 1);
            }
        },

        /**
         * @description 添加自定义收货信息
         */
        handleAddVirtualInfo() {
            if (this.formData.virtual_buy_info_list.length === 20) {
                this.$notify({
                    title: '警告',
                    message: '最多只可以添加20个',
                    type: 'warning'
                });
                return false;
            }
            this.formData.virtual_buy_info_list.push({
                value: true,
                label: ''
            });
        },

        /**
         * @description 取消勾选拦截弹窗
         */
        handleChangeCancelData(row) {
            if (!row.value) {
                this.virtualRow = row;
                this.cancelDialog = true;
            }
        },

        /**
         * @description 确定取消勾选
         */
        cancelViruteData() {
            this.$set(this.virtualRow, 'value', false);

            let list = this.formData.virtual_buy_info_list.reduce((cur, next) => {
                if (next.value) {
                    cur.push({
                        value: next.value,
                        label: next.label
                    });
                }
                return cur;
            }, []);

            this.formData.virtual_buy_info_list = list;

            this.cancelDialog = false;
        },

        /**
         * @description 取消勾选
         */
        confirmViruteData() {
            this.$set(this.virtualRow, 'value', true);
            this.cancelDialog = false;
        },

        /**
         * @description 删除团购优惠
         */
        deleteDiscount(index) {
            // if(this.formData.discountList.length == 1) {
            //     this.$notify({
            //         title: '警告',
            //         message: '最少要保留一个',
            //         type: 'warning'
            //     });
            //     return false;
            // }
            this.formData.discountList.splice(index, 1);
            this.watchDiscount();

            if (this.formData.discountList.length == 0) {
                this.discountDataList = [];
            }
        },

        /**
         * @description 添加团购优惠
         */
        fnAddDiscount() {
            if (this.formData.discountList.length == 6) {
                this.$notify({
                    title: '警告',
                    message: '最多只可以添加6个',
                    type: 'warning'
                });
                return false;
            }
            this.formData.discountList.push({
                sale_num: '',
                sale_discount: ''
            });
        },

        /**
         * @description 团购数量二次校验
         */
        blurDiscount(event, index) {
            if (Number(event) < 2) {
                this.$set(this.formData.discountList[index], 'sale_num', '');
                this.$notify({
                    title: '警告',
                    message: '满减数量不能低于2件',
                    type: 'warning'
                });
                this.watchDiscount();
                return false;
            }
        },
        blurNumDiscount(event, index) {
            let hasPoint = event.includes('.');
            let pointLength = hasPoint ? event.split('.')[1].length : 0;

            if ((Number(event) < 1 || Number(event) >= 10) || typeof (Number(event)) !== 'number' || (hasPoint && pointLength > 1) || /[\u4E00-\u9FA5]+$/.test(event) || /[a-zA-Z]+$/img.test(event)) {
                this.$set(this.formData.discountList[index], 'sale_discount', '');

                const message = hasPoint && pointLength > 1 ? `请保留一位小数点` : '请填写正确的折扣（1-9.9折）';

                this.$notify({
                    title: '警告',
                    message: message,
                    type: 'warning'
                });
                this.watchDiscount();
                return false;
            }
        },

        /**
         * @description 监听折扣填写数据生成
         */
        watchDiscount(event, index, type) {

            //数据生成
            const generateList = () => {
                // console.log('goods_product_list', this.formData.goods_product_list);

                if (this.discountDataList.length > 0 && this.formData.goods_product_list.length > 0) {
                    let flag = false;

                    if (this.formData.goods_product_list.length == 1) {
                        this.formData.goods_product_list.forEach(el => {
                            if (el.spec_list.length) {
                                if (!this.fnComputeDataSpec()) return;
                            }
                        });
                    } else if (!this.fnComputeDataSpec()) return;
                }

                let dataList = this.formData.discountList;
                let arrayList = this.formData.goods_product_list;
                let list = [];


                let filterSpec = list => {
                    if (!list.length) return '--';
                    let str = '';

                    list.forEach(el => {
                        str += el.spec_name + '：' + el.spec_value + '；';
                    });
                    return str;
                };

                let data = [];

                if (dataList.length) {
                    for (let key = 0; key < dataList.length; key++) {
                        let sale_num = dataList[key]['sale_num'],
                            sale_discount = dataList[key]['sale_discount'],
                            // sale_discount = this.discountPrice && dataList[key]['sale_discount'] ? Number(dataList[key]['sale_discount'] / 10 * this.discountPrice).toFixed(2) * 1 : '',
                            obj = {};

                        obj['sale_num'] = sale_num ? sale_num : '';
                        obj['sale_discount'] = sale_discount ? sale_discount : '';

                        data.push(obj);
                    }
                }

                if (arrayList.length) {
                    for (let key = 0; key < arrayList.length; key++) {
                        list.push({
                            spec_list: arrayList[key]['spec_list'].length ? filterSpec(arrayList[key]['spec_list']) : '--',
                            goods_price: arrayList[key]['product_price'] ? arrayList[key]['product_price'] : 0,
                            data: data
                        });
                    }
                }

                if (!list.length) return false;

                this.discountDataList = JSON.parse(JSON.stringify(list));
                // console.log('团购数据', this.discountDataList);
            };

            //开始校验
            if (type === '1') {
                if (!event) {
                    generateList();
                    return false;
                }
                if (typeof (Number(event)) !== 'number' || /[\u4E00-\u9FA5]+$/.test(event) || /[a-zA-Z]+$/img.test(event)) {
                    this.$set(this.formData.discountList[index], 'sale_num', '');
                    this.$notify({
                        title: '警告',
                        message: '请填写正确的满减数量',
                        type: 'warning'
                    });
                    generateList();
                    return false;
                }
            }
            if (type === '2') {
                if (!event) {
                    generateList();
                    return false;
                }
            }

            generateList();
        },

        /**
         * @description 改变学生加重新计算
         */
        changePrice() {
            this.ifChange = true;
            this.watchDiscount();
        },

        /**
         * @description 添加满减
         */
        fnAddFullreDuction() {
            if (this.formData.fullreList.length == 6) {
                this.$notify({
                    title: '警告',
                    message: '最多只可以添加6个',
                    type: 'warning'
                });
                return false;
            }
            this.formData.fullreList.push({
                require_num: '',
                reduction_price: ''
            });
        },

        /**
         * @description 删除满减
         */
        fnDeleteFuller(index) {
            if (this.formData.fullreList.length == 1) {
                this.$notify({
                    title: '警告',
                    message: '最少要保留一个',
                    type: 'warning'
                });
                return false;
            }
            this.formData.fullreList.splice(index, 1);
        },

        /**
         * 佣金判断
         */
        fnGetCimmis(value) {
            if (Number(value * 1.06) > 30) {
                this.dialogCommision = true;
            }
        },


        fnGeturl(url) {
            if (url) {
                this.$refs.preview.show([
                    url
                ]);
            }
        },
        querySearch(queryString, cb) {
            var restaurants = this.serviceRecomend;
            var results = queryString ? restaurants.filter(item => {
                if (item.value && item.value.indexOf(queryString) > -1) {
                    return true;
                } else {
                    return false;
                }
            }) : restaurants;
            // 调用 callback 返回建议列表的数据


            cb(results);
        },
        fnChangeFreight(val) {
            if (val == 0) {
                this.$set(this.serviceList, 0, {value: '包邮'});
                this.free.free_type = -1;
            } else {
                this.$set(this.serviceList, 0, {value: '邮费'});
                this.free.free_type = this.free.free_old_type;
            }
        },

        /**
         * 获取选择模版编号
         */
        fnGetTemp(no) {
            this.freeList.forEach(element => {
                if (element.template_no == no) {
                    this.$set(this.free, 'template_no', element.template_no);
                    this.$set(this.free, 'freight_type', element.freight_type);
                }
            });
        },

        /** 验证结束时间 */
        validateExpire(rule, value, callback) {
            if (!value || value == 0) {
                callback();
            } else {
                if (value < this.formData.shelf_time) {
                    callback(new Error('结束时间不得晚于上架时间'));
                    return;
                }
                callback();
            }
        },
        validateFreight(rule, value, callback) {
            if (this.hasFreight == 1 && value <= 0) {
                callback(new Error('请输入邮费'));
            } else {
                callback();
            }
        },
        validateService(rule, value, callback) {
            let size = 0;

            for (var i in this.services) {
                if (this.services[i]) {
                    size++;
                }
            }
            if (size <= 1) {
                callback(new Error('请至少填写一项服务内容'));
            } else {
                callback();
            }
        },
        handleScroll(e) {
            if (this.cancelScroll) {
                return;
            }
            let scrollTop = this.$refs.scrollWrapper.scrollTop; // 滚动区域


            if (scrollTop < this.$refs.sale.offsetTop - 20) {
                this.activeName = 'base';
            } else if (scrollTop >= this.$refs.sale.offsetTop && scrollTop < this.$refs.spec.offsetTop - 20) {
                this.activeName = 'sale';
            } else if (scrollTop >= this.$refs.spec.offsetTop && scrollTop < this.$refs.desc.offsetTop - 20) {
                this.activeName = 'spec';
            } else if (scrollTop > this.$refs.desc.offsetTop) {
                this.activeName = 'desc';
            }
        },
        fnChangeTab() {
            if (this.cancelScroll) {
                this.cancelScroll();
            }
            let _this = this;

            setTimeout(() => {
                this.cancelScroll = null;
                let cancelScroll = null;

                this.cancelScroll = cancelScroll = VueScrollTo.scrollTo(this.$refs[this.activeName], 500, {
                    container: '.content-wrap',
                    offset: -10,
                    onStart() {
                        _this.cancelScroll = cancelScroll;
                    },
                    onCancel() {
                        _this.cancelScroll = null;
                    },
                    onDone() {
                        if (_this.cancelScroll && _this.cancelScroll == cancelScroll) {
                            _this.cancelScroll = null;
                        }
                    },
                });

            }, 0);
        },

        getGoodTypes() {
            // 商品分类
            this.$post('/student/shop_goods_type%5Cget_list_linkage', {}, resp => {
                if (resp.code == 1) {
                    this.types = resp.data.list;
                }
            });
            // 获取取商品代理类目列表
            /*this.$post('/__student/Goods/listsAgentCate', {}, resp => {
                if (resp.code == 1) {
                    this.cateList = resp.data.list;
                }
            });*/
        },

        /** 添加规格/规格值 */
        addSpec(index) {
            if (index < 0) {
                this.spec.push({
                    name: '',
                    values: [{value: ''}]
                });
                return;
            }
            this.spec[index].values.push({value: ''});
        },
        /** 删除规格/规格值, valIndex=-1删除整条规格 */
        delSpec(specIndex, valIndex) {
            if (valIndex > -1) {
                if (this.spec[specIndex].values.length > 1) {
                    this.spec[specIndex].values.splice(valIndex, 1);
                } else {
                    this.spec.splice(specIndex, 1);
                }

            } else {
                this.spec.splice(specIndex, 1);
            }
            // this.computeSpec();
        },
        getSpecNums() {
            let total = 1;

            for (let i in this.spec) {
                total *= this.spec[i].values.length;
            }
            return total;
        },
        fnSetPrice() {
            this.computeSpec();
        },
        computeSpec() {
            let specDetail = [];
            let specs = [];

            //验证佣金比例是否正常
            // if(Number(this.formData.goods_commission_rate) <= 0 || Number(this.formData.goods_commission_rate) > 30) {
            //     this.$message({
            //         center: true,
            //         message: '请填写正确的佣金比例',
            //         type: 'warning'
            //     });
            //     return;
            // }

            // console.log(this.spec, 'spec');

            if (!this.spec.length) return false;

            // 遍历所有规格,生成笛卡尔积
            for (let i in this.spec) {
                if (!this.spec[i].spec_name) {
                    this.$message({
                        center: true,
                        message: '请完善规格设置',
                        type: 'warning'
                    });
                    return;
                }
                let tmp = [];


                // 去除临时结果中的一条,查找是否有重名规格
                if (specs.length > 0) {
                    // console.log(specs, this.spec[i]);
                    for (let n in specs[0]) {
                        if (specs[0][n].spec_name == this.spec[i].spec_name) {
                            this.$message({
                                center: true,
                                message: '请修改重名规格' + this.spec[i].spec_name,
                                type: 'warning'
                            });
                            return;
                        }
                    }
                }

                for (let j in this.spec[i].values) {
                    if (!this.spec[i].values[j].spec_value && this.spec[i].values[j].spec_value !== 0) {
                        this.$message({
                            center: true,
                            message: '请完善规格设置',
                            type: 'warning'
                        });
                        return;
                    }

                    if (specs.length <= 0) {
                        tmp.push([{spec_name: this.spec[i].spec_name, spec_value: this.spec[i].values[j].spec_value}]);
                    } else {
                        for (var k in specs) {
                            tmp.push(specs[k].concat({
                                spec_name: this.spec[i].spec_name,
                                spec_value: this.spec[i].values[j].spec_value
                            }));
                        }
                    }

                }
                specs = tmp;
            }

            //确定后添加
            for (let m in specs) {
                specDetail.push({
                    spec_list: specs[m],
                    product_price: this.formData.goods_price,
                    tuan_price: this.formData.tuan_price,
                    // tuan_owner_pay: this.formData.tuan_owner_pay,
                    product_stock: '',
                    // buy_limit_count: -1,
                    product_commission: this.formData.goods_price * this.formData.goods_commission_rate / 100,//分佣比例 = 拼团价 * 比例
                    cost_price: this.formData.goods_cost_price,
                    product_sku: '',
                    product_barcode: '',
                    product_image: ''
                });
            }

            //处理规格数据填充header
            if (specDetail.length > 0) {
                this.batch.spec_list = [];

                specDetail.map(item => {
                    if (item.spec_list) {
                        item.spec_list.map((option, i) => {
                            this.batch.spec_list.push(option);
                        });
                    }
                });

                let obj = {};

                this.batch.spec_list = this.batch.spec_list.reduce((cur, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    obj[next.spec_value] ? "" : obj[next.spec_value] = true && cur.push(next);

                    return cur;
                }, []);

                this.batch.spec_list.unshift({
                    spec_value: '全部',
                    spec_name: '规格'
                });
                this.$set(this.batch, 'spec_list', this.batch.spec_list);
                this.$set(this.batch, 'is_header_wrap', this.batch.spec_list.length > 0 ? false : true);
            }

            this.specDetailCopy = JSON.parse(JSON.stringify(specDetail)); //拷贝一份数据用于筛选规格使用
            this.specDetail = this.specDetailCopy;
            this.$refs.mainform.validateField('goods_spec_list', errore => {
            });

            // 更新团购优惠列表数据规格
            if (!this.fnComputeDataSpec()) return;
            this.watchDiscount();
            return true;
        },

        //筛选规格数据
        fnSelectSpec() {
            this.ifChange = false;//关闭自动计算佣金值
            if (this.batch.spec_list_value !== 0) {
                let spec_value = this.batch.spec_list[this.batch.spec_list_value].spec_value;

                let list = [];

                //筛选对应规格的所有数据
                this.specDetailCopy.map(item => {
                    if (item.spec_list) {
                        item.spec_list.map((option, i) => {
                            if (option.spec_value == spec_value) {
                                list.push(item);
                            }
                        });
                    }
                });

                this.specDetail = list;
                // console.log(this.specDetailCopy, 'specDetailCopy');
            } else {
                this.specDetail = this.specDetailCopy;
            }

            // console.log(this.formData.goods_product_list,'goods_product_list');
            //打开自动计算佣金值
            setTimeout(() => {
                this.ifChange = true;
            }, 100);
        },

        //批量填充
        fnBatchData() {
            try {
                let batch = JSON.parse(JSON.stringify(this.batch));

                this.tuanIndex = -1;

                if (batch.product_commission !== '' && batch.tuan_price !== '' && Number(batch.product_commission) > Number(batch.tuan_price)) {
                    this.$message({
                        type: 'warning',
                        message: '分佣金额不得高于团购价',
                        cneter: true
                    });
                    return;
                }

                if (batch.tuan_price == '' && batch.product_commission !== '') {
                    for (let i = 0; i < this.specDetail.length; i++) {
                        if (Number(batch.product_commission) > Number(this.specDetail[i].tuan_price)) {
                            this.$message({
                                type: 'warning',
                                message: '分佣金额不得高于团购价',
                                cneter: true
                            });
                            return;
                        }
                    }
                }

                if (this.specDetail) {
                    this.specDetail.map(item => {
                        // if(batch.product_price) {
                        //     item.product_price = batch.product_price;
                        // }
                        if (batch.product_price) {
                            item.product_price = batch.product_price;
                            this.ifChange = false; //允许修改佣金值
                            item.product_commission = batch.product_price * Number(this.formData.goods_commission_rate) * 0.01;
                        }

                        // if(batch.product_commission) {
                        //     this.ifChange = false; //允许修改佣金值
                        //     item.product_commission = batch.product_commission;
                        // }
                        if (batch.product_stock) {
                            item.product_stock = batch.product_stock;
                        }
                        // if(batch.buy_limit_count) {
                        //     item.buy_limit_count = batch.buy_limit_count;
                        // }
                        if (batch.cost_price) {
                            item.cost_price = batch.cost_price;
                        }
                        if (batch.product_sku) {
                            item.product_sku = batch.product_sku;
                        }
                        if (batch.product_barcode) {
                            item.product_barcode = batch.product_barcode;
                        }
                    });
                }

                if (this.batch.spec_list_value == 0) {
                    this.specDetailCopy = JSON.parse(JSON.stringify(this.specDetail));
                }

                // console.log(this.batch.spec_list_value, this.specDetail, this.specDetailCopy);
                this.batch = {
                    spec_list: this.batch.spec_list, //生成规格数据
                    spec_list_value: this.batch.spec_list_value == 0 ? 0 : this.batch.spec_list_value, //选中的规格数据
                    product_price: '', //学生价
                    tuan_price: '', //团购价
                    product_commission: '', //分佣金额
                    product_stock: '', //库存
                    // buy_limit_count: '',
                    cost_price: '', //成本价
                    product_sku: '', //商家编码
                    product_barcode: '' //条形码
                };
                //关闭修改佣金值
                setTimeout(() => {
                    this.ifChange = true;
                    this.watchDiscount();
                }, 100);
            } catch (error) {
                console.log('error:' + error);
            }
        },

        /**
         * @description 监听佣金比例修改
         */
        handleComputeSpec() {
            const goods_commission_rate = this.formData.goods_commission_rate;
            const specDetail = [];

            if (goods_commission_rate === '') return false;

            for (let i in this.specDetail) {
                this.$set(this.specDetail[i], 'product_commission', Number(goods_commission_rate) * this.specDetail[i]['product_price'] / 100);
            }

            console.log('specDetail', this.specDetail);
        },

        /**
         * 获取填写团购价当前未知，用于指定修改对应分佣金额
         */
        fnGetIndex(index) {
            this.tuanIndex = index;
        },

        /**
         * 预览图片
         */
        fnPreviewImg(index) {
            this.$refs.preview.show([
                this.specDetail[index].product_image
            ]);
        },

        fnStop(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        },

        /**
         * 删除图片
         */
        fnDeleteImg(index) {
            this.specDetail[index].product_image = '';
        },

        /**
         * 设置失效时间
         */
        fnSetExpireTime() {
            const date = new Date().getTime();

            this.$set(this.formData, 'expire_time', date);
        },

        fnChangeUpload(file, fileList) {
            this.uploadPics = fileList;
        },
        fnUploadImage(e) {
            let pic = new FormData();

            pic.append('image', e.file);
            this.$upload('/Upload/image', pic).then(resp => {
                if (resp.code == 1) {
                    // 调用组件成功回调,修改样式
                    e.onSuccess(resp.data, {
                        name: name,
                        url: resp.data.url
                    }, this.uploadPics);
                } else {
                    // 失败后调用组件error回调,删除对应元素
                    e.onError(resp.msg);
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        cneter: true
                    });
                }
            });
        },
        handleRemove(file) {
            for (var i in this.uploadPics) {
                if (this.uploadPics[i].uid == file.uid) {
                    this.uploadPics.splice(i, 1);
                }
            }

        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadExceed() {
            this.$message({
                type: 'warning',
                message: '最多上传5张图片',
                cneter: true
            });
        },

        //商品规格图片
        fnUploadThumbBatch(e) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('image', e.file);
            this.thumbUploading = true;
            this.thumbUploadTime = timeTmp;
            this.$upload('/Upload/image', pic).then(resp => {
                if (this.thumbUploadTime !== timeTmp) {
                    return;
                }
                if (resp.code == 1) {
                    if (this.imgIndex !== '') {
                        this.specDetail[this.imgIndex].product_image = resp.data.url;
                        this.formData.goods_product_list[this.imgIndex].product_image = resp.data.url;
                    }
                    e.onSuccess({
                        url: resp.data.url
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },

        //缩略图
        fnChangeUploadThumb(file, fileList) {
            this.thumbTmp = file;
        },
        fnUploadThumb(e) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('image', e.file);
            this.thumbUploading = true;
            this.thumbUploadTime = timeTmp;
            this.$upload('/Upload/image', pic).then(resp => {
                if (this.thumbUploadTime !== timeTmp) {
                    return;
                }
                if (resp.code == 1) {
                    this.formData.goods_cover = resp.data.url;
                    e.onSuccess({
                        url: resp.data.url
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: '上传图片失败',
                        center: true
                    });
                    e.onError();
                }
            });
        },
        fnComputeimgList() {
            let res = [];

            for (let i in this.uploadPics) {
                if (this.uploadPics[i].status == 'success') {
                    res.push(this.uploadPics[i].response.url);
                } else {
                    return false;
                }
            }
            this.formData.goods_image_list = res;
            return true;
        },
        fnComputeDataSpec() {
            let dataSpec = [];
            let dataSpecDetail = [];

            for (let i in this.spec) {
                for (let j in this.spec[i].values) {
                    dataSpec.push({spec_name: this.spec[i].spec_name, spec_value: this.spec[i].values[j].spec_value});
                }
            }

            this.formData.goods_spec_list = dataSpec;
            this.formData.goods_product_list = this.batch.spec_list_value == 0 ? this.specDetail : this.specDetailCopy;
            // this.formData.goods_product_list = this.specDetailCopy;
            // this.formData.goods_product_list = this.specDetail;
            // console.log(this.formData.goods_product_list, 'goods_product_listddd');
            return true;
        },
        fnGetSpecFromData() {
            let spec = [];

            for (let i in this.formData.goods_spec_list) {
                let flag = false;

                for (let j in spec) {
                    if (spec[j].spec_name == this.formData.goods_spec_list[i].spec_name) {
                        spec[j].values.push({spec_value: this.formData.goods_spec_list[i].spec_value});
                        flag = true;
                    }
                }
                if (!flag) {
                    spec.push({
                        spec_name: this.formData.goods_spec_list[i].spec_name,
                        values: [{spec_value: this.formData.goods_spec_list[i].spec_value}],
                    });
                }
            }
            this.spec = spec;

            //佣金比例和规格图片处理
            let list = [];

            this.formData.goods_product_list.map(item => {
                list.push({
                    product_no: item.product_no,
                    product_price: item.product_price,
                    cost_price: item.cost_price,
                    product_commission: item.product_commission,
                    tuan_price: item.tuan_price,
                    product_stock: item.product_stock,
                    // buy_limit_count: item.buy_limit_count,
                    spec_list: item.spec_list,
                    product_sku: item.product_sku,
                    product_barcode: item.product_barcode,
                    product_image: item.product_image
                });
            });

            //处理规格数据填充header
            if (list.length > 0) {
                this.batch.spec_list = [];

                list.map(item => {
                    if (item.spec_list) {
                        item.spec_list.map((option, i) => {
                            // if(i == 0) {
                            this.batch.spec_list.push(option);
                            // }
                        });
                    }
                });

                let obj = {};
                let newList = [];

                this.batch.spec_list = this.batch.spec_list.reduce((cur, next) => {
                    // eslint-disable-next-line no-unused-expressions
                    obj[next.spec_value] ? "" : obj[next.spec_value] = true && cur.push(next);

                    return cur;
                }, []);

                this.batch.spec_list.unshift({
                    spec_value: '全部',
                    spec_name: '规格'
                });

                this.$set(this.batch, 'spec_list', this.batch.spec_list);
                this.$set(this.batch, 'is_header_wrap', this.batch.spec_list.length > 0 ? false : true);
            }
            this.specDetailCopy = JSON.parse(JSON.stringify(list)); //拷贝一份数据用于筛选规格使用
            this.specDetail = list;


            // console.log(this.specDetailCopy, this.batch, 'specDetailCopy');
        },
        fnGetData() {
            this.$post('/student/shop_goods%5Cget_goods_detail', {
                goods_no: this.goods_no
            }, resp => {
                if (resp.code == 1) {
                    setTimeout(() => {
                        this.init = true;
                    }, 800);
                    resp.data.shelf_time = resp.data.shelf_time * 1000;
                    resp.data.expire_time = resp.data.expire_time * 1000;
                    resp.data.goodType = [resp.data.parent_type_no, resp.data.type_no];
                    for (let i in resp.data.goods_image_list) {
                        this.uploadPics.push({
                            status: 'success',
                            uid: new Date().getTime() + i,
                            url: resp.data.goods_image_list[i],
                            response: {url: resp.data.goods_image_list[i]}
                        });
                    }
                    this.thumbTmp = {
                        status: 'success',
                        uid: new Date().getTime(),
                        url: resp.data.goods_cover,
                        response: {url: resp.data.goods_cover}
                    };
                    let goodService = resp.data.goods_tag_list;

                    resp.data.goods_service = resp.data.goods_tag_list;

                    this.hasFreight = resp.data.freight_type ? 1 : 0;
                    this.$set(this.free, 'free_mod', resp.data.freight_template_no);
                    this.free.free_kilog = resp.data.goods_weight;
                    this.free.template_no = resp.data.freight_template_no;

                    if (resp.data.freight_type == 'fix') {
                        this.free.free_money = resp.data.goods_freight;
                        this.free.freight_type = 'fix';
                        if (Number(resp.data.goods_freight) > 0) {
                            this.free.free_old_type = this.free.free_type = 1;
                        } else {
                            this.hasFreight = 0;
                        }
                    }
                    if (resp.data.freight_type == 'weight') {
                        this.free.freight_type = 'weight';
                        this.free.free_old_type = this.free.free_type = 0;
                    }
                    if (resp.data.freight_type == 'num') {
                        this.free.freight_type = 'num';
                        this.free.free_old_type = this.free.free_type = 0;
                    }

                    // 服务端会将邮费剔除,在这里根据邮费补充至第一个数组
                    if (this.hasFreight > 0) {
                        this.$set(this.serviceList, 0, {value: '邮费'});
                    } else {
                        this.$set(this.serviceList, 0, {value: '包邮'});
                    }
                    for (let k = 0; k < 4; k++) {
                        if (goodService.length > k) {
                            this.$set(this.serviceList, k + 1, {value: goodService[k]});
                        } else {
                            this.$set(this.serviceList, k + 1, {value: ''});
                        }
                    }
                    resp.data.goods_service = 'not null';

                    this.formData = resp.data;

                    if (resp.data.goods_type === 8) {
                        let list = [];

                        this.$set(this.formData, 'virtual_buy_info_type', resp.data.virtual_buy_info_type);

                        if (resp.data.virtual_buy_info_other) {
                            let virtual_buy_info_other = resp.data.virtual_buy_info_other.split(',');

                            if (!!virtual_buy_info_other.length) {
                                for (let i in virtual_buy_info_other) {
                                    list.push({
                                        value: true,
                                        label: virtual_buy_info_other[i]
                                    });
                                }
                                this.$set(this.formData, 'virtual_buy_info_list', list);
                            }
                        } else {
                            this.$set(this.formData, 'virtual_buy_info_list', []);
                        }

                        this.checkVirtualType = this.formData.virtual_buy_info_type.indexOf(1) > -1 ? true : false;
                        // console.log('virtual_buy_info_list', list, this.formData.virtual_buy_info_type, this.checkVirtualType);
                    } else {
                        this.$set(this.formData, 'virtual_buy_info_list', resp.data.virtual_buy_info_other ? resp.data.virtual_buy_info_other : []);
                    }

                    //设置团购折扣
                    this.$set(this.formData, 'discountList', !!resp.data.wholesale_info ? resp.data['wholesale_info']['list'] : []);
                    this.$set(this.formData, 'discount_type', resp.data.reduction_info.list.length ? 2 : 3);

                    setTimeout(() => {
                        this.watchDiscount();
                    }, 200);

                    this.fnGetSpecFromData();
                    this.$nextTick(() => {
                        if (this.$refs.ueditor) {
                            this.$refs.ueditor.setContent(this.formData.goods_content);
                        }
                    });
                    //回填满减力度
                    this.$set(this.formData, 'reduction_type', resp.data.reduction_info.reduction_type.toString());
                    if (resp.data.reduction_info.list.length == 0) {
                        this.$set(this.formData, 'fullreList', [{
                            require_num: '',
                            reduction_price: ''
                        }]);
                    } else {
                        this.$set(this.formData, 'fullreList', resp.data.reduction_info.list);
                    }
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg || '获取商品信息失败',
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 保存提交商品
         */
        fnSubmitData() {
            const init = () => {
                // 生成规格
                if (!this.fnComputeDataSpec()) {
                    return;
                }
                // 获取上传图片
                if (!this.fnComputeimgList()) {
                    this.$message({
                        type: 'warning',
                        message: '请等待所有图片上传完毕',
                        center: true
                    });
                    return;
                }
                this.formData.goods_content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

                this.$refs.mainform.validate(valid => {
                    if (valid) {

                        // 自定义收货信息校验
                        if (this.formData.virtual_buy_info_list.length && this.formData.virtual_buy_info_type.includes(1)) {
                            let status = false;

                            for (let i = 0; i < this.formData.virtual_buy_info_list.length; i++) {
                                if (!this.formData.virtual_buy_info_list[i]['label']) {
                                    status = true;
                                }
                            }

                            if (status) {
                                this.$notify({
                                    title: '警告',
                                    message: `当前勾选的自定义信息未填写信息名称`,
                                    duration: 2000,
                                    type: 'warning'
                                });
                                return;
                            }
                        }

                        // 学生价校验
                        if (Number(this.formData.goods_price_origin) < Number(this.formData.goods_price)) {
                            this.$notify({
                                title: '警告',
                                message: `学生价不能高于商品原价`,
                                duration: 2000,
                                type: 'warning'
                            });
                            return;
                        }

                        // 规格图片处理,为空默认填充
                        if (this.formData.goods_product_list) {
                            for (let index = 0; index < this.formData.goods_product_list.length; index++) {
                                if (this.formData.goods_product_list[index].product_image == '') {
                                    this.formData.goods_product_list[index].product_image = this.formData.goods_cover;
                                }

                                if (this.formData.goods_product_list[index].product_stock === '') {
                                    this.$notify({
                                        title: '警告',
                                        message: `库存不可以为空`,
                                        duration: 2000,
                                        type: 'warning'
                                    });
                                    return;
                                }
                            }
                        }

                        const fullerlist = this.formData.fullreList.reduce((cur, next) => {
                            if (next.require_num && next.reduction_price) {
                                cur.push({
                                    require_num: Number(next.require_num),
                                    reduction_price: Number(next.reduction_price)
                                });
                            }
                            return cur;
                        }, []);

                        //过滤tuan_price
                        if (this.formData.goods_product_list.length > 0) {
                            this.formData.goods_product_list.forEach(el => {
                                delete el.tuan_price;
                            });
                        }

                        // 团购优惠校验
                        if (this.formData.discount_type == 3 && this.formData.discountList.length) {
                            let dataList = this.formData.discountList;
                            let sale_num = [],
                                sale_discount = [];

                            for (let key = 0; key < dataList.length; key++) {
                                sale_num.push(Number(dataList[key]['sale_num']));
                                sale_discount.push(Number(dataList[key]['sale_discount']));
                            }

                            for (let key = 0; key < sale_num.length; key++) {
                                if (sale_num[key] - sale_num[key - 1] <= 0 && key > 0) {
                                    this.$notify({
                                        title: '警告',
                                        message: `人数需要大于上一级阶梯`,
                                        duration: 2000,
                                        type: 'warning'
                                    });
                                    return false;
                                }
                            }

                            for (let key = 0; key < sale_discount.length; key++) {
                                if (sale_discount[key] - sale_discount[key - 1] >= 0 && key > 0) {
                                    this.$notify({
                                        title: '警告',
                                        message: `后一级的团购折扣需要低于前一级的团购折扣`,
                                        duration: 2000,
                                        type: 'warning'
                                    });
                                    return false;
                                }
                            }
                        }

                        // console.log('---', this.formData.virtual_buy_info_list, this.formData.virtual_buy_info_type);

                        let virtual_buy_info_other = [];

                        if (this.formData.virtual_buy_info_type.indexOf(1) > -1) {
                            virtual_buy_info_other = this.formData.virtual_buy_info_list.reduce((cur, next) => {
                                cur.push(next.label);
                                return cur;
                            }, []);
                        }


                        this.$post('/__student/Goods/save', {
                            "goods_no": this.goods_no,
                            "type_no": this.formData.goodType[1],
                            "goods_title": this.formData.goods_title,
                            "goods_sort": this.formData.goods_sort,
                            "shelf_time": parseInt(this.formData.shelf_time / 1000),
                            "expire_time": parseInt(this.formData.expire_time / 1000),
                            "goods_cover": this.formData.goods_cover,
                            "goods_image_json": JSON.stringify(this.formData.goods_image_list),
                            // "tuan_num": '',//this.formData.tuan_num
                            // "tuan_auto_success":'',// this.formData.tuan_auto_success
                            // "tuan_price": '',//this.formData.tuan_price
                            "goods_price": this.formData.goods_price,
                            "reduction_info": this.formData.discount_type == 2 ? JSON.stringify({
                                reduction_type: Number(this.formData.reduction_type),
                                list: fullerlist
                            }) : JSON.stringify({
                                reduction_type: 1,
                                list: []
                            }),
                            "goods_price_origin": this.formData.goods_price_origin,
                            "goods_freight": this.free.free_type == 1 ? this.free.free_money : 0,
                            "freight_template_no": !this.hasFreight ? '' : (this.free.free_type == 0 ? this.free.template_no : ''),
                            "freight_type": !this.hasFreight ? 'fix' : (this.free.free_type == 0 ? this.free.freight_type : 'fix'),
                            "goods_weight": (this.free.free_type == 0) && (this.free.freight_type == 'weight') ? this.free.free_kilog : 0,
                            "goods_tag": this.services.join(','),
                            "goods_content": this.formData.goods_content,
                            "goods_spec_json": JSON.stringify(this.formData.goods_spec_list),
                            "goods_product_json": JSON.stringify(this.formData.goods_product_list),
                            "goods_cost_price": this.formData.goods_cost_price,
                            "goods_commission_rate": this.formData.goods_commission_rate,
                            "agent_cate_no": this.formData.agent_cate_no,
                            "goods_number": this.formData.goods_number,
                            "buy_limit_count": this.formData.buy_limit_count,
                            "goods_type": this.formData.goods_type,
                            "is_cross_border": this.formData.is_cross_border,
                            "wholesale_info": this.formData.discount_type == 3 ? JSON.stringify({
                                type: this.formData.discount_type,
                                list: this.formData.discountList
                            }) : JSON.stringify({}),
                            "virtual_buy_info_type": JSON.stringify(this.formData.virtual_buy_info_type),
                            "virtual_buy_info_other": this.checkVirtualType ? virtual_buy_info_other.join() : []
                        }).then(resp => {
                            if (resp.code == 1) {
                                this.$notify({
                                    title: '提示',
                                    message: '操作成功',
                                    duration: 2000,
                                    type: 'success'
                                });
                                this.$router.push({
                                    path: '/manage/market/good-list',
                                    query: {
                                        index: 1
                                    }
                                });
                            } else {
                                this.$notify({
                                    title: '警告',
                                    message: resp.msg,
                                    duration: 2000,
                                    type: 'warning'
                                });
                            }
                        });
                    } else {
                        this.$notify({
                            title: '警告',
                            message: '请修改未通过验证项',
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            };

            if (this.formData.is_disable_edit) {
                this.$notify({
                    title: '警告',
                    message: '当前商品正在参与疯狂星期五活动，暂不能编辑商品详情页，如有疑问，可以咨询群内客服。',
                    duration: 2000,
                    type: 'warning'
                });
                return false;
            }

            init();
        },

        /**
         * 预览视频
         * @param url
         */
        previewVideo(url) {
            this.video_cover = url;
            this.left = this.$refs.wrapper.clientWidth - 300;
            this.$refs.videoSimple.showVideo();
        },
    }
};

</script>

<style lang="less" scoped>
/deep/ .edui-default .edui-editor-iframeholder {
    pointer-events: auto;
}
.is-disabled {
    background: #fff;
}
// v2.0.8视频预览
.video-wrapper {
    width: 90px;
    height: 90px;
    position: relative;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    pointer-events: auto;
    .video-cover {
        width: 100%;
        height: 100%;
    }
    .video-action {
        width: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    .status-text {
        width: 100%;
        height: 24px;
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        &.verify {
            background: #FFAF39;
        }
        &.reject {
            background: rgba(0, 0, 0, 0.4);
        }
    }
}
.video-status-tips {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F95B56;
}
.good-edit-wrap {
    // border: 1px solid #000;
    // padding-top: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: calc(100% - 24px);
    width: calc(100% - 24px);
    margin: 12px;
    position: relative;
}

.zd-bood-tip {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #F5A623;
    margin-bottom: 10px;
    cursor: pointer;

    .icon-231 {
        font-size: 14px;
        margin-left: 8px;
        color: #fff;
    }
}

.tab-wrapper {
    background-color: #fff;
    width: 100%;
    padding: 0 15px;
    z-index: 100;
    border-bottom: 1px solid #d3dce6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-wrap {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    transform: translate3d(0, 0, 0);
    &::-webkit-scrollbar {
        width: 6px;
    }
}

.good-pannel {
    background-color: #fff;
    margin-top: 10px;
    padding-bottom: 30px;

    .title {
        font-size: 12px;
        font-weight: 600;
        color: rgba(63, 69, 75, 1);
        line-height: 17px;
        padding: 15px;
        border-bottom: 1px solid #d3dce6;
        margin-bottom: 30px;
    }

    &.footer {
        text-align: center;
        padding: 12px 0;
    }
}

.good-input {
    width: 300px;
}

.service-input {
    width: 120px;
    margin-right: 10px;
}

.good-title {
    width: 600px;
}

.spec-unit {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
    margin-left: -24px;

    .good-spec-input {
        width: 240px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    &-check {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1989fa;
        border-radius: 4px;
        margin-top: 8px;
        cursor: pointer;
    }
}

.spec-table-wrapper {
    margin: 0 50px 0 0;
    padding-top: 20px;
    border-top: 1px solid #f4f4f4;
}

.with-length input {
    padding-right: 50px;
}

.input-length {
    color: #999;
    margin-left: -50px;
    position: relative;
}

.zd-cate-provide {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: center;

    &:hover {
        background: transparent;
        border: none;
    }

    .iconfont {
        font-size: 20px;
        color: #999;
    }
}

.zd-heade-hover {
    border: none !important;
    background: transparent !important;
    color: #909399 !important;

    &:hover {
        color: #909399 !important;
    }
}

.zd-header-wrap {
    background: #fbfbfb;
    display: flex;
    align-items: center;
    height: 39px;
    border-left: 1px solid #EBEEF5;
    border-right: 1px solid #EBEEF5;
    border-top: 1px solid #EBEEF5;
    box-sizing: border-box;
    justify-content: space-around;

    .zd-wrap-select, .good-table-input {
        width: calc(100% / 10) !important;
        box-sizing: border-box;
        padding: 0 10px;
        color: #909399;
    }

    .zd-wrap-select-zw {
        opacity: 0;
        pointer-events: none;
    }
}

.zd-wrap-price {
    width: 110px;
    height: 32px;
    overflow: hidden;
    position: relative;

    .zd-wrap-image {
        width: 110px;
        height: 32px;
        background: #f4f4f4;
        color: #88909c;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        cursor: pointer;
    }

    .zd-upload-image {
        width: 32px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;
    }

    .zd-upload-mc {
        width: 80px;
        height: 32px;
        overflow: hidden;
        position: absolute;
        left: 30px;
        top: 0;
        z-index: 102;
        // background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon-zoom-in {
            color: #333;
            font-size: 16px;
            margin-right: 10px;
        }

        .el-icon-delete {
            color: #333;
            font-size: 16px;
        }
    }
}

.zd-header-button {
    //   height: 32px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
}

.zd-dialog-text {
    color: #333;
    line-height: 23px;
    text-align: center;
}

.zd-dialog-foot {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38px;
    margin-bottom: 10px;
}

.dialogCommision {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    &-wrap {
        width: 512px;
        height: 358px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        border-radius: 4px;
        padding: 0 32px;

        .el-icon-close {
            color: #C0CCDA;
            font-size: 18px;
            position: absolute;
            font-weight: bold;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }

        &-title {
            color: #333333;
            font-size: 16px;
            font-weight: 500;
            margin: 40px 0 16px 0;
        }

        &-text {
            color: #333333;
            font-size: 14px;
            letter-spacing: 0.5px;
            line-height: 22px;
        }
    }
}

.wrap-hasFreight {
    width: 100%;
    box-sizing: border-box;
    background: rgba(250, 250, 250, 1);
    border-radius: 4px;
    margin-right: 33px;
    padding: 15px 24px;

    &-list {
        height: 32px;
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        &-kg {
            position: relative;
            left: -36px;
            z-index: 99999;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.25);
        }

        &-desc {
            font-size: 14px;
            color: #999;
            white-space: nowrap;
        }
    }

    &-list:nth-child(2) {
        margin-bottom: 0;
    }
}

//满减
.tuan_head {
    height: 24px;
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.tuan_wrap {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 528px;
    background: #FAFAFA;
    padding: 24px 24px 22px 24px;
    border: 1px #EEEEEE solid;
    margin-top: 18px;

    .tuan_list {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px #EEEEEE solid;
        width: 480px;
        background: #FAFAFA;
        margin-bottom: 16px;

        .tuan_content {
            width: 100%;
            height: 44px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 24px;
            background: #F2F2F2;
            align-items: center;

            .tuan_title {
                color: #333;
                font-size: 14px;
                font-weight: 500;
                white-space: nowrap;
            }

            .tuan_delete {
                color: #20A0FF;
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
            }
        }

        .tuan_side {
            width: 100%;
            height: 84px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 24px;

            .side_start {
                color: #333333;
                font-size: 14px;
                margin-right: 16px;
                white-space: nowrap;
            }

            .side_end {
                color: #333333;
                margin: 0 12px 0 0px;
                white-space: nowrap;
            }
        }
    }

    .tuan_button {
        width: 480px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #20A0FF;
        border-radius: 4px;
        margin-top: 8px;
        margin-bottom: 11px;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
        font-weight: 500;

        & > i {
            font-size: 14px;
            font-weight: 500;
            margin-right: 10px;
        }
    }

    .tuan_desc {
        color: #999;
        font-size: 12px;
        width: 480px;
        text-align: center;
    }
}

// 优惠
._discount {
    width: 951px;
    background: rgba(247, 247, 247, 1);
    margin-top: 12px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 24px 0 24px 0px;

    ._container {
        display: flex;
        flex-direction: column;
        margin-left: 25px;

        ._container_title {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 24px;
        }

        ._container_list {
            height: 36px;
            display: flex;
            align-items: center;
            margin-bottom: 24px;

            ._container_test {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
            }

            ._container_del {
                color: rgba(32, 160, 255, 1);
                font-size: 14px;
                cursor: pointer;
                margin-left: 24px;
            }
        }

        ._container_button {
            width: 517px;
            height: 36px;
            background: rgba(32, 160, 255, 1);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 30px;
            cursor: pointer;

            .icon-count {
                color: rgba(255, 255, 255, 1);
                font-size: 14px;
                margin-right: 10px;
            }
        }

        ._container_foot {
            width: 903px;
            margin-top: 12px;

            ._container_foot_title {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                line-height: 20px;
            }

            ._container_foot_desc {
                color: rgba(153, 153, 153, 1);
                line-height: 20px;
                font-size: 12px;
            }
        }
    }
}

._virtual {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    // border: 1px red solid;
    ._v_info {
        display: flex;
        align-items: center;

        ._v_text {
            color: rgba(153, 153, 153, 1);
            font-size: 12px;
            line-height: 17px;
            margin-left: 24px;
            margin-right: 173px;
        }
    }

    ._v_random {
        display: flex;
        min-height: 32px;
        margin-top: 16px;

        ._v_list {
            width: 830px;
            padding: 24px 26px;
            box-sizing: border-box;
            border: 1px rgba(238, 238, 238, 1) solid;
            border-radius: 4px;
            background: #FBFBFB;
            display: flex;
            flex-wrap: wrap;
            margin-left: 15px;

            ._v_items {
                display: flex;
                margin-right: 26px;
                margin-bottom: 16px;

                ._v_list_wrap {
                    display: flex;
                    flex-direction: column;
                    width: 188px;
                    margin-left: 10px;

                    ._v_list_tips {
                        color: rgba(0, 0, 0, 0.25);
                        font-size: 12px;
                        margin-top: 12px;
                        height: 13px;
                        line-height: 13px;
                    }
                }
            }
        }
    }
}

.public_dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .public_logo {
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
    }

    .public_title {
        color: rgba(51, 51, 51, 1);
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 24px;
    }

    .public_text {
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
        font-size: 14px;
        width: 246px;
        text-align: center;
    }

    .public_foot {
        height: 32px;
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 24px;
    }
}
</style>
<style lang="less">
.good-edit-wrap {
    .common-table {
        margin-top: 15px;
        border: 1px solid rgba(244, 244, 244, 1);
        border-bottom: 0;

        th {
            background: rgba(251, 251, 251, 1);
            padding: 3px 0;
        }

        td {
            padding: 7px 0;
        }
    }

    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-tabs__item {
        color: #606972;
    }

    .el-tabs__nav-wrap::after {
        display: none;
    }

    .avatar-uploader-thumb {
        display: inline-block;

        .el-upload--picture-card {
            position: relative;
            width: 90px;
            height: 90px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .state-uploading {
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .el-icon-upload {
            color: #88909c;
            font-size: 20px;
        }

        .el-upload-text {
            line-height: 20px;
            color: #88909c;
        }

        .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 2px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .el-upload:hover {
            border-color: #409eff;
        }

        .avatar {
            width: 90px;
            height: 90px;
            display: block;
        }
    }

    .avatar-uploader-small {
        display: inline-block;
        vertical-align: top;

        .el-upload--picture-card {
            width: 90px;
            height: 90px;
            border-radius: 2px !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .el-icon-upload {
            color: #88909c;
            font-size: 20px;
        }

        .el-upload-text {
            line-height: 20px;
            color: #88909c;
        }

        .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .el-upload:hover {
            border-color: #409eff;
        }
    }

    .dragglable-upload-item {
        width: 90px;
        height: 90px;
        border-radius: 2px !important;

        .el-upload-list__item-loading-label {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 90px;
            text-align: center;

            .el-icon-upload-uploading {
                font-size: 20px;
            }
        }

        .first-tip {
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            right: 0;
            top: 0;
            height: 18px;
            font-size: 12px;
            width: 100%;
            line-height: 18px;
            text-align: center;
        }

        &.is-ready .el-upload-list__item-loading-label {
            display: block;
        }

        &:hover .el-upload-list__item-loading-label {
            display: none;
        }
    }

    .el-form-item.is-success .el-input__inner,
    .el-form-item.is-success .el-input__inner:focus,
    .el-form-item.is-success .el-textarea__inner,
    .el-form-item.is-success .el-textarea__inner:focus {
        border-color: #dcdfe6;
    }

    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
        border-color: #409eff;
    }

    .el-icon-circle-check {
        display: none;
    }

    .specs {
        .spec-unit .el-input__inner {
            padding-right: 47px;
        }

        .el-input__suffix {
            left: 193px;
        }
    }

    .el-radio__input.is-checked + .el-radio__label {
        color: #606266;
        // padding-left: 3px;
    }

    .tuan_wrap .el-input__suffix {
        right: 23px;
    }

    .el-radio__label {
        padding-left: 3px;
    }

    ._v_info {
        .el-checkbox-group {
            display: flex;
        }
    }

    ._cancel {
        .el-dialog__header {
            padding: 0;
        }
    }
}

.service-tip-pop {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 20px;

    .popper__arrow {
        display: none;
    }
}

.icon-commission {
    color: #D8D8D8;
    font-size: 14px;
    margin-left: 4px;
    cursor: pointer;
}

.commision-pop {
    font-size: 12px;
    padding: 15px;
}

.zd-wrap-price .el-upload--picture-card {
    border: none !important;
}
</style>
